import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../provider/post_list_provider.dart';

class LikeButton extends StatefulWidget {
  final String postId;

  const LikeButton({super.key, required this.postId});

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton>
    with SingleTickerProviderStateMixin {
  bool _showEffect = false;

  @override
  Widget build(BuildContext context) {
    return Selector<PostListProvider, Map<String, dynamic>?>(
      selector: (context, provider) => provider.posts.firstWhereOrNull(
        (p) => p['id'].toString() == widget.postId,
      ),
      shouldRebuild: (prev, next) => prev?['liked'] != next?['liked'],
      builder: (context, post, _) {
        if (post == null) return const SizedBox();

        final isLiked = post['liked'] ?? false;
        final likeCount = post['likeCount'] ?? 0;

        return GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: () {
            if (!isLiked) {
              setState(() => _showEffect = true);
              Future.delayed(const Duration(milliseconds: 400), () {
                if (mounted) setState(() => _showEffect = false);
              });
            }
            context.read<PostListProvider>().toggleLike(widget.postId, isLiked);
          },
          child: Container(
            padding: const EdgeInsets.all(2),
            child: Stack(
              alignment: Alignment.centerLeft,
              children: [
                // 💥 扩散动画圈圈
                AnimatedOpacity(
                  opacity: _showEffect ? 1.0 : 0.0,
                  duration: const Duration(milliseconds: 400),
                  child: AnimatedScale(
                    scale: _showEffect ? 2.5 : 0.0,
                    duration: const Duration(milliseconds: 400),
                    curve: Curves.easeOutCubic,
                    child: Container(
                      width: 18,
                      height: 18,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.redAccent.withOpacity(0.3),
                      ),
                    ),
                  ),
                ),

                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    AnimatedSwitcher(
                      duration: const Duration(milliseconds: 10),
                      transitionBuilder: (child, animation) =>
                          ScaleTransition(scale: animation, child: child),
                      child: Container(
                        key: ValueKey(isLiked),
                        child: Icon(
                          isLiked ? Icons.favorite : Icons.favorite_border,
                          size: 20,
                          color: isLiked ? Colors.redAccent : Colors.black,
                          // 添加边框
                          semanticLabel: 'Like',
                        ),
                      ),
                    ),
                    const SizedBox(width: 3),
                    Text(
                      '$likeCount',
                      style: const TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w300,
                        color: Colors.black87,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
